<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/static/layui/css/layui.css" rel="stylesheet">
</head>

<body class="main_body white">
  <!-- <div class="layui-header">
    <ul class="layui-nav layui-layout">
      <li class="layui-nav-item"><a href="">我的群</a></li>
  </div> -->

  <div class="layui-layout">
    <div style="padding: 16px;">
      <table class="layui-hide" id="initTable" lay-filter="initTable"></table>
    </div>
  </div>

  <input type="hidden" value="" id="copyLink">

  <script type="text/html" id="toolbarInfo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="createInviteCode">生成邀请码</button>
    </div>
  </script>

  <script type="text/html" id="barLineInfo">
    <div class="layui-clear-space">
      <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="edit">删除</a>
    </div>
</script>
  <script src="/static/layui/layui.js"></script>
  <script src="/static/common/js/clipboard.min.js"></script>
  <script>
    function copyLink(obj) {
      var $ = layui.$;
      var invite_code = $(obj).attr('data-url');
      $("#copyLink").attr('data-clipboard-text', "✨ 嘿，我发现了一个超有趣的小天地！在这里可以：\n- 遇见懂你的小伙伴\n- 分享彼此的小秘密\n- 记录生活的美好点滴\n\n点击我的专属邀请链接："+ window.location.protocol + '//' + window.location.host + '/invite/?invite_code=' + invite_code+" ，加入爱嘀咕和我们一起玩耍吧！名额有限哦~");
      // window.location.protocol + '//' + window.location.host + window.location.pathname
      var clipboard = new ClipboardJS('#copyLink')
      $("#copyLink").trigger('click');
      clipboard.destroy();
      layer.msg('链接已复制，快邀请好友注册吧！');
    }

    function showBlog(obj) {
      var $ = layui.$;
      var url = $(obj).attr('data-url');
      parent.window.open(url);
    }

    layui.use(['table', 'dropdown'], function () {
      var table = layui.table;
      var dropdown = layui.dropdown;
      var $ = layui.$;

      // 创建渲染实例
      table.render({
        elem: '#initTable',
        url: '/tools/userinvite/getList', // 此处为静态模拟数据，实际使用时需换成真实接口
        toolbar: '#toolbarInfo',
        defaultToolbar: false,
        height: 'full-35', // 最大高度减去其他容器已占有的高度差
        lineStyle: 'height: 70px;',
        css: [ // 重设当前表格样式
          '.layui-table-tool-temp{padding-right: 145px;}'
        ].join(''),
        cellMinWidth: 80,
        page: false,
        cols: [[
          { field: 'nickname', align: 'center', title: '昵称' },
          { field: 'blog', align: 'center', title: '账号' },
          {
            field: 'head_image', width: 100, align: 'center', title: '头像', templet: function (d) {
              if (d.head_image) {
                return '<img width="50" height="50" src="' + d.head_image + '" alt="">'
              }
              return ''
            }
          },
          {
            field: 'invite_code', width: 150, align: 'center', title: '邀请码(点击复制链接分享)', templet: function (d) {
              if (d.invite_status == 0) {
                return '<a href="javascript:;" data-url="' + d.invite_code + '" onclick="copyLink(this)" alt="点击复制">点击复制</a>'
              } else if (d.invite_status == 2) {
                return '<a href="javascript:;" data-url="/' + d.blog + '/own/" onclick="showBlog(this)" alt="查看主页">查看主页</a>'
              }

            }
          },
          {
            field: 'invite_status', align: 'center', title: '邀请状态', templet: function (d) {
              if (d.invite_status == 0) {
                return '<button type="button" class="layui-btn layui-bg-orange">等待用户注册</button>'
              } else if (d.invite_status == 2) {
                return '<button type="button" class="layui-btn layui-bg-blue">邀请成功</button>'
              }
              return '<button type="button" class="layui-btn layui-btn-disabled">未邀请</button>'

            }
          },
          { fixed: 'right', align: 'center', title: '操作', width: 100, minWidth: 100, toolbar: '#barLineInfo' }
        ]]
      });

      // 工具栏事件
      table.on('toolbar(initTable)', function (obj) {
        switch (obj.event) {
          case 'createInviteCode':
            $.ajax({
              type: "post",
              url: "/tools/userinvite/createInviteCode",
              dataType: "json",
              success: function (res) {
                layer.msg(res.msg);
                if (res.code == 0) {
                  table.reload('initTable')
                }
              }
            });
            break;
        };
      });

      // 触发单元格工具事件
      table.on('tool(initTable)', function (obj) { // 双击 toolDouble
        var data = obj.data; // 获得当前行数据
        // console.log(data)
        if (obj.event === 'edit') {
          layer.confirm('确定删除 [' + data.invite_code + '] 么', function (index) {
            $.ajax({
              type: "post",
              url: "/tools/userinvite/delInviteCode",
              data: { 'id': data.id },
              dataType: "json",
              success: function (res) {
                layer.msg(res.msg);
                if (res.code == 0) {
                  table.reload('initTable')
                }
              }
            });
            // layer.close(index);
            // // 向服务端发送删除指令
            // table.reload('initTable')
          });
        }
      });

    });
  </script>
</body>

</html>